<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
  <script src="listSelect.js"></script>
</head>

<body>

  Клик на элементе выделяет только его.
  <br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
  <br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
  <br>

  <ul>
    <li>Кристофер Робин</li>
    <li>Винни-Пух</li>
    <li>Ослик Иа</li>
    <li>Мудрая Сова</li>
    <li>Кролик. Просто кролик.</li>
  </ul>

  <button onclick="alert(listSelect.getSelected())">listSelect.getSelected()</button>

  <script>
    var listSelect = new ListSelect({
      elem: document.querySelector('ul')
    });
  </script>

</body>

</html>